<template>
	<view>
		<view class="">
		
					<view class="spinner">
						<view style="position: absolute;color: #ffffff;   top: 40%; left: 40%;text-align: center;">
							<view class="" v-if="sumif">
								{{mess}}%
							</view>	
						</view>
						<view class="spinner-container container1">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>
		
						<view class="spinner-container container2">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>
						<view class="spinner-container container3">
		
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>
					</view>
				
				</view>
				<view class="" v-if="sumif" style="border: 1px solid rebeccapurple;width: 300rpx;color: #ffffff;z-index: 99;position: absolute;left: 30%;">
					剩余生成时间约{{sum}}秒
					
				</view>
			
	</view>

</template>

<script>
 var item
	export default {
		
		name:"custom_load",
		props: {
				title:'',
				val:''
		},
		
		data() {
			return {
				sumif:true,
				mess:0,
				sum:10,
			};
		},created() {
			console.log("title---",this.val)
			if(this.val!==''){
				this.sumif=false
			}else{
				item= setInterval(()=>{
						this.sum--;
						this.mess+=10
						if(this.sum===0){
							clearInterval(item)
						}
					},2000)
			}
	  
			setTimeout(function() {
			 	console.log("val---",this.val)
			}, 5000)
		},
	}
</script>

<style lang="scss" scoped>
.spinner {
	border: 1px solid rebeccapurple;
		margin: 10px auto;
		width: 80px;
		height: 80px;
		position: relative;
	}

	.container1>view,
	.container2>view,
	.container3>view {
		width: 15px;
		height: 15px;
		background-color: #ffffff;

		border-radius: 100%;
		position: absolute;
		-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
		animation: bouncedelay 1.2s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.spinner .spinner-container {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.container2 {
		-webkit-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}

	.container3 {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.circle1 {
		top: 0;
		left: 0;
	}

	.circle2 {
		top: 0;
		right: 0;
	}

	.circle3 {
		right: 0;
		bottom: 0;
	}

	.circle4 {
		left: 0;
		bottom: 0;
	}

	.container2 .circle1 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.container3 .circle1 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.container1 .circle2 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.container2 .circle2 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	.container3 .circle2 {
		-webkit-animation-delay: -0.7s;
		animation-delay: -0.7s;
	}

	.container1 .circle3 {
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}

	.container2 .circle3 {
		-webkit-animation-delay: -0.5s;
		animation-delay: -0.5s;
	}

	.container3 .circle3 {
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.container1 .circle4 {
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}

	.container2 .circle4 {
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.container3 .circle4 {
		-webkit-animation-delay: -0.1s;
		animation-delay: -0.1s;
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0.0)
		}

		40% {
			-webkit-transform: scale(1.0)
		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0.0);
			-webkit-transform: scale(0.0);
		}

		40% {
			transform: scale(1.0);
			-webkit-transform: scale(1.0);
		}
	}

</style>